<template>
  <view class="new_main">
    <view class="perch"></view>
    <view class="titleView">
      <u-icon name="arrow-left" @click="goBack" color="#333" size="22"></u-icon>
      <view class="top_search">
        <u-search
          style="width: 100%"
          :focus="true"
          placeholder="请输入关键字"
          prefixIcon="search"
          v-model="keyword"
          maxlength="20"
          @search="searchFun"
          confirm-type="search"
          :show-action="false"
          @change="changeInput"
        >
        </u-search>
      </view>
      <view class="search_btn" @click="searchFun">搜索</view>
    </view>
    <!-- 未搜索 -->
    <view class="flex1" v-show="!isSearch">
      <!-- 历史搜索 -->
      <view class="history" v-if="historyList.length > 0">
        <view class="search_title">
          <text class="title_txt">最近搜索</text>
          <u-icon name="trash" color="#999" size="20" @click="delAll"></u-icon>
        </view>
        <view class="search_list_tag">
          <text
            class="search_item"
            v-for="(item, index) in historyList"
            :key="index"
            @click="fastSearch(item)"
            >{{ item }}</text
          >
        </view>
      </view>
      <!-- 热门热搜 -->
      <view class="history hot">
        <view class="search_title">
          <text class="title_txt">热门热搜</text>
        </view>
        <view class="search_list_tag">
          <text
            class="search_item"
            :class="item.is_hot ? 'iconfont iconredu' : ''"
            v-for="(item, index) in hotList"
            :key="index"
            @click="fastSearch(item.content)"
            >{{ item.content }}</text
          >
        </view>
      </view>
    </view>
    <!-- 搜索结果 -->
    <view class="search_result" v-show="isSearch">
      <scroll-view
        class="result_scroll"
        lower-threshold="200"
        scroll-y="true"
        @scrolltolower="ReachBottom"
      >
        <view class="result_num">
          <text>为您找到</text>
          <text class="c429 bold">{{ count }}</text>
          <text>条信息</text>
        </view>
        <view class="flex_wrap_between">
          <view
            class="quiz_list"
            v-for="(item, index) in dataList"
            :key="index"
            @click="itemClick(item, index)"
          >
            <view class="quiz_list_content ellipsis2">
              <rich-text :nodes="item.title"></rich-text>
            </view>
          </view>
          <view v-if="dataList.length == 0" class="empty_wrap">
            <image
              class="empty_img"
              src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/no-joinList.png"
            >
            </image>
            <text class="tips">暂无数据</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <view
      v-if="searchData.length > 0 && searchListShow"
      class="search_change_list"
      style="top: calc(var(--status-bar-height) + 120rpx)"
    >
      <search-list
        :data="searchData"
        :keyword="keyword"
        url="/quiz/askInfo/index"
      >
      </search-list>
    </view>
  </view>
</template>
<script
  type="text/javascript"
  src="plus-confusion://../quiz/search/index"
></script>

<style lang="scss" scoped>
@import url(@/static/css/iconfont.css);

.new_main {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;

  .perch {
    width: 100vw;
    height: var(--status-bar-height);
  }

  .titleView {
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;

    .top_search {
      height: 68rpx;
      background: #f3f3f3;
      border-radius: 36rpx;
      width: 580rpx;
    }

    .search_btn {
      color: #666666;
      font-size: 28rpx;
    }
  }

  .history {
    padding: 0 30rpx;

    .search_title {
      padding: 10rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title_txt {
        font-size: 30rpx;
      }
    }

    .search_list_tag {
      display: flex;
      flex-wrap: wrap;
      .search_item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 24rpx 20rpx 0 0;
        padding: 0 30rpx;
        height: 56rpx;
        background: #f8f9fa;
        border-radius: 28rpx;
        font-size: 22rpx;
        color: #666666;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
          margin-right: 6rpx;
          font-size: 30rpx;
          color: #ff6161;
        }
      }
    }
  }

  .hot {
    margin-top: 60rpx;
  }

  .search_result {
    flex: 1;
    padding: 0 30rpx;
    background-color: #f7f7f7;
    overflow: hidden;

    .result_num {
      padding: 30rpx 0 15rpx;
      font-size: 24rpx;
      color: #999999;
      line-height: 30rpx;
    }

    .result_scroll {
      height: 100%;
    }

    .item {
      position: relative;
      overflow: hidden;
      margin: 22rpx 0;
      width: 334rpx;
      height: 451rpx;
      border-radius: 10rpx;
      background-color: #f6eeff;
    }

    .item-in {
      margin: 15rpx auto;
      overflow: hidden;
      width: 304rpx;
      height: 423rpx;
      background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
      );
      border-radius: 10px;
    }
    .quiz_list {
      position: relative;
      margin-top: 15rpx;
      padding: 30rpx 40rpx 20rpx;
      background: #ffffff;
      border-radius: 20rpx;
      width: 100% !important;

      .quiz_list_content {
        width: 100%;
        margin-top: 15rpx;
        display: -webkit-box; /*弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*排列方式*/
        -webkit-line-clamp: 2; /*显示文本行数*/
        overflow: hidden; /*溢出隐藏*/
      }
    }
  }
}

.empty_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);

  .empty_img {
    width: 160rpx;
    height: 160rpx;
  }

  .tips {
    margin-top: 18rpx;
    font-size: 30rpx;
    color: #999;
  }
}

em {
  font-style: normal;
  color: #fa3534;
}

.search_change_list {
  position: absolute;
  left: 0;
}
</style>
